<template>
    <div class="g-bd" id="j-bd">
        <div class="g-row">
            <div>
                <div style="height: 144px;">
                    <div class="m-hd">
                        <div class="m-topBar">
                            <div class="bd">
                                <div class="row">
                                    <a class="u-icon u-icon-home" href="/"></a>
                                    <a href="/">
                                        <i class="logo u-icon u-icon-logo"></i>
                                    </a>
                                    <div class="right">
                                        <a class="search" href="/search">
                                            <i class="u-icon u-icon-search1"></i>
                                        </a>
                                        <a class="cart" href="/cart">
                                            <i class="u-icon u-icon-cart"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="m-detail-con">
                        <div class="m-detail-slide-con">
                            <div class="m-slide ">
                                <div class="slide-con">
                                    <mt-swipe :auto="4000">
                                        <mt-swipe-item v-for="item in detailData.thumbs">
                                            <img :src="item" alt="">
                                        </mt-swipe-item>
                                        <mt-swipe-item v-if="detailData.video">
                                            <video :src="detailData.video"></video>
                                        </mt-swipe-item>
                                    </mt-swipe>
                                </div>
                            </div>
                        </div>
                        <!-- <div class="m-characteristic">
                            <div class="item">
                                <div class="left">
                                    <img src="http://yanxuan.nosdn.127.net/b55469421f21d641f34b4fbcad096e2d.jpg">
                                </div>
                                <div class="right">
                                    <div class="text">全棉透气</div>
                                    <div class="text">柔软亲肤</div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="left">
                                    <img src="http://yanxuan.nosdn.127.net/205cd22d4f0cc665b73751a78f5cf510.jpg">
                                </div>
                                <div class="right">
                                    <div class="text">花漾设计</div>
                                    <div class="text">春色萌动</div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="left">
                                    <img src="http://yanxuan.nosdn.127.net/b4d90421861e3abc255844926447ccfd.jpg">
                                </div>
                                <div class="right">
                                    <div class="text">独立收纳</div>
                                    <div class="text">随心方便</div>
                                </div>
                            </div>
                        </div> -->
                        <div></div>
                        <div class="dt-section-1">
                            <div class="m-detailBaseInfo">
                                <div class="content">
                                    <div class="info">
                                        <div class="name">{{detailData.title}}</div>
                                        <!-- <div class="desc">{{detailData.content}}</div> -->
                                        <div class="price">
                                            <span class="priceArea">
                                                <span class="currentPrice">
                                                    <span>¥</span>
                                                    <span>{{detailData.new_price}}</span>
                                                </span>
                                                <del>￥{{detailData.origin_price}}</del>
                                            </span>
                                        </div>
                                        <div class="tagList">
                                            <span></span>
                                            <div class="wrap">
                                                <li class="item">
                                                    <span>
                                                        <a class="tag" href="/item/newItem">
                                                            <span>{{detailData.status == 1 ? '新品': ''}}</span>
                                                            <i class="u-icon u-icon-detailTagArrow"></i>
                                                        </a>
                                                    </span>
                                                </li>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- <div class="spmcBanner">
                                    <i class="u-icon u-icon-supersmall"></i>
                                    <span>超级会员价¥{{detailData.origin_price}}</span>
                                    <span class="right">
                                        <span>立即开通 </span>
                                        <i class="u-icon u-icon-arrow-right3"></i>
                                    </span>
                                </div> -->
                                <!-- <div class="specSelect">
                                    <div class="m-listItem undefined">
                                        <div class="inner">
                                            <div class="inner">
                                                <span class="it">请选择规格数量</span>
                                            </div>
                                        </div>
                                        <i class="icon u-icon u-address-right"></i>
                                    </div>
                                </div> -->
                            </div>
                        </div>
                        <span></span>
                        <!-- <div class="m-points">
                            <div class="m-listItem undefined noArrow">
                                <div class="inner">
                                    <div class="inner">
                                        <span>积分：购买最高得</span>
                                        <span>29</span>
                                        <span>积分</span>
                                    </div>
                                </div>
                            </div>
                        </div> -->
                        <span></span>
                        <!-- <div class="service-wraper dt-section">
                            <div>
                                <div class="m-serviceEntry">
                                    <div class="left">服务：</div>
                                    <div class="right ">
                                        <div class="right-item-wraper">
                                            <div class="right-item">30天无忧退换货</div>
                                            <div class="right-item">48小时快速退款</div>
                                        </div>
                                        <div class="right-item-wraper">
                                            <div class="right-item">满88元免邮费</div>
                                            <div class="right-item">网易自营品牌</div>
                                        </div>
                                        <div class="right-item-wraper">
                                            <div class="right-item">国内部分地区无法配送</div>
                                        </div>
                                    </div>
                                    <i class="icon u-icon u-address-right"></i>
                                </div>
                            </div>
                        </div> -->
                        <div></div>
                        <div class="m-itemDetail">
                            <div class="dt-section dt-section-1">
                                <div class="m-attrCon">
                                    <div class="attrList">
                                        <div class="tt">商品参数</div>
                                        <div class="item" v-for="item in detailData.tree" :key="item.name">
                                            <div class="left">{{item.name}}</div>
                                            <div class="right">
                                                <div class="con">{{item.list.join(',    ')}}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="dt-section dt-section-1">
                                <div class="m-detailHtml">
                                    <p v-for="item in detailData.content_thumbs"><img :src="item"></p>
                                </div>
                            </div>
                            <!-- <div class="dt-section dt-section-2">
                                <div class="m-reportCheck">
                                    <h3 class="title">
                                        <span class="text">质检报告</span>
                                    </h3>
                                    <div class="bd">
                                        <img g ta-reactid=".0.0.1.0.h.3.0.1.0">
                                        <i class="zoomIn"></i>
                                    </div>
                                    <div class="m-lightbox" style="display:none;">
                                        <div class="swiper-container">
                                            <div class="swiper-wrapper">
                                                <div class="swiper-slide">
                                                    <div class="pinch">
                                                        <div class="bg-white">
                                                            <img src="http://yanxuan.nosdn.127.net/dd44505ff731517a3a4125a86117a7bf.jpg"></div>
                                                    </div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="pinch">
                                                        <div class="bg-white">
                                                            <img src="http://yanxuan.nosdn.127.net/d8c31a6c47838e935ba8db56b3afc2f4.jpg"></div>
                                                    </div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="pinch">
                                                        <div class="bg-white">
                                                            <img src="http://yanxuan.nosdn.127.net/ba5bcddf8ead347b3ac4aaa87f490bc3.jpg"></div>
                                                    </div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="pinch">
                                                        <div class="bg-white">
                                                            <img src="http://yanxuan.nosdn.127.net/31333ef6aa72d3ba13e541db4f639cf4.jpg"></div>
                                                    </div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="pinch">
                                                        <div class="bg-white">
                                                            <img src="http://yanxuan.nosdn.127.net/d0b5505989c937484d0a0599bf84146d.jpg"></div>
                                                    </div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="pinch">
                                                        <div class="bg-white">
                                                            <img src="http://yanxuan.nosdn.127.net/38c492c49c9b7774e9936fd63b31879b.jpg"></div>
                                                    </div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="pinch">
                                                        <div class="bg-white">
                                                            <img src="http://yanxuan.nosdn.127.net/fc66cd5ba2ff8737d77c26b6211f2ab4.jpg"></div>
                                                    </div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="pinch">
                                                        <div class="bg-white">
                                                            <img src="http://yanxuan.nosdn.127.net/81230434f74ada5dcf668915acacacfb.jpg"></div>
                                                    </div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="pinch">
                                                        <div class="bg-white">
                                                            <img src="http://yanxuan.nosdn.127.net/da07488c4caf08a5bf7968edbaeb864e.jpg"></div>
                                                    </div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="pinch">
                                                        <div class="bg-white">
                                                            <img src="http://yanxuan.nosdn.127.net/4821303079292264a3ad97d15c09f178.jpg"></div>
                                                    </div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="pinch">
                                                        <div class="bg-white">
                                                            <img src="http://yanxuan.nosdn.127.net/1ce507287ad8f7a417240ec2467fcee1.jpg"></div>
                                                    </div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="pinch">
                                                        <div class="bg-white">
                                                            <img src="http://yanxuan.nosdn.127.net/89a516e8e5a56c10033cb252aef434bd.jpg"></div>
                                                    </div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div class="pinch">
                                                        <div class="bg-white">
                                                            <img src="http://yanxuan.nosdn.127.net/bfb3b842e6248493ff0d4fde33c210f2.jpg"></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="swiper-pagination"></div>
                                        </div>
                                    </div>
                                </div>
                            </div> -->
                            <!-- <div class="m-commonIssues undefined">
                                <div class="tt">
                                    <div class="line"></div>
                                    <span class="text">常见问题</span>
                                </div>
                                <div class="list">
                                    <div class="item">
                                        <p class="qu">
                                            <i class="u-icon u-detail-redNum"></i>
                                            <span>购买运费如何收取？</span>
                                        </p>
                                        <p class="an">单笔订单金额（不含运费）满88元免邮费；不满88元，每单收取10元运费。<br>(港澳台地区需满500元免邮费；不满500元，每单收取30元运费)</p>
                                    </div>
                                    <div class="item">
                                        <p class="qu">
                                            <i class="u-icon u-detail-redNum"></i>
                                            <span>网易严选的订单如何配送？</span>
                                        </p>
                                        <p class="an">网易严选会根据商品所在地、顾客所在地和商品的尺寸重量优选物流配送商，确保优质用户体验。目前暂不支持自选快递，具体物流信息可在下单成功后“我的订单-追踪物流”中查看。</p>
                                    </div>
                                    <div class="item">
                                        <p class="qu">
                                            <i class="u-icon u-detail-redNum"></i>
                                            <span>如何申请退换货？</span>
                                        </p>
                                        <p class="an">1.自收到商品之日起30日内，顾客可申请无忧退货；如果是退货，退款将原路返还，不同的银行处理时间不同，预计1-5个工作日到账；<br>2.内裤和食品等特殊商品无质量问题不支持退换货；<br>3.退货流程：<br>确认收货-申请退货-客服审核通过-用户寄回商品-仓库签收验货-退款审核-退款完成；<br>4.换货流程：<br>确认收货-申请换货-客服审核通过-用户寄回商品-仓库签收验货-客服确认-换货完成；<br>5.退换货运费由网易严选承担（大件商品除外）。上门取件费用由网易严选统一与快递服务商结算，顾客只需将退换货商品交给上门取件快递员寄回。如顾客选择自行寄回商品，请先垫付运费，到货验证商品后，严选将以现金券形式为用户报销运费，不接受单方面到付件。</p>
                                    </div>
                                    <div class="item">
                                        <p class="qu">
                                            <i class="u-icon u-detail-redNum"></i>
                                            <span>如何开具发票？</span>
                                        </p>
                                        <p class="an">1.请在下单时选择“我要开发票”并填写相关信息（APP仅限2.4.0及以上版本）。开具增值税专用发票需在下单时填写增票资质信息。温馨提示：请确保增票资质信息与贵司税务登记证信息一致，避免因开票信息错误给贵司带来损失。 <br>2.可选开票内容：<br> 依照国税总局开票法规，严选订单开具纸质发票、电子发票，开票内容为明细；礼品卡开票内容为预付卡；增值税专用发票开票内容为明细。</p>
                                    </div>
                                </div>
                            </div> -->
                        </div>
                        <div>
                            <div></div>
                            <div class="m-btnGroup">
                                <div class="inner">
                                    <button class="w-button w-button-xxl w-button-noRadius btn btn-icon w-button-ghostWhite">
                                        <i name="detail-kefu" class="u-icon u-icon-detail-kefu "></i>
                                    </button>
                                    <button class="w-button w-button-xxl w-button-noRadius btn btn-text w-button-ghostWhite">立即购买</button>
                                    <button class="w-button w-button-xxl w-button-noRadius btn btn-text">加入购物车</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <i class="m-goToTop"></i>
            </div>
        </div>
    </div>
</template>
<script>
import Vue from 'vue'
import { Swipe, SwipeItem } from 'mint-ui';

Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
import "@/assets/less/detail.less";

export default {
    name: "detail",
    data() {
        return {
            detailData: {
                data: {

                }
            }
        };
    },
	mounted() {
        this.getDetail(this.$route.query.id)
	},
	methods: {
		getDetail(id) {
			// api.getDetail({id: id}).then(res => {
				let res = {
                   "status":0,
                   "data":{
                        "id":28,
                        "type":11,
                        "title":"男士禮盒三件裝",
                        "new_price":78,
                        "origin_price":129,
                        "content":"?品牌男士T恤组合礼盒装（工厂自制）\n       一盒3条，三色各1\n          M-XXL码\n?完全可以再加价30-50批的品质，但是我们出厂价在发，品质要最好，价格要最低！\n?三色搭配，解决整个夏天的穿搭！纯棉面料手感柔软亲肤，透气性好，弹性大，做工细致，内里全部包边，自制款每一期都好评超多的噢！\n?爸爸、弟弟、哥哥、老公都必须来一盒～穿搭轻松无压力",
                        "thumbs":"/upload/20180523/14338515.png,/upload/20180523/34397964.png,/upload/20180523/29456579.png,/upload/20180523/15291562.png",
                        "status":1,
                        "create_time":1527084704,
                        "content_thumbs":"/upload/20180523/12131928.png,/upload/20180523/35548474.png,/upload/20180523/47839491.png,/upload/20180523/39131611.png,/upload/20180523/21163818.png",
                        "video":"/upload/20180523/6424.MOV",
                        "tree":"[{\"name\":\"衣服(一組三個顏色)\",\"list\":[\"M\",\"XXL\"],\"tag\":\"\"}]",
                        "update_time":1527088580
                    },
                    "message":""
                }
                if(res.status == 0) {
                    this.detailData = res.data
                    this.detailData.thumbs = this.detailData.thumbs.split(",")
                    this.detailData.content_thumbs = this.detailData.content_thumbs.split(",")
                    this.detailData.tree = JSON.parse(this.detailData.tree)
                }
			// })
		}
	}
};
</script>